<template>
  <div class="login-content">
    <h2>
      <img src="@/assets/icons/logodark.png" />
    </h2>
    <!-- <div class="close-icon">
                <i class="el-icon-circle-close" @click="closeLogin"></i>
            </div> -->
    <div class="login-title">Login</div>
    <div class="key-label">Key</div>
    <div class="input-key">
      <input
        class="input-style"
        v-model="loginKey"
        type="text"
        id="sc-name"
        name="username"
        autocomplete="off"
        tabindex="1"
      />
      <div id="sc-login-info-success"></div>
      <div id="sc-login-info"></div>
    </div>
    <div class="login-button">
      <button id="btn-sc-login" @click="toLogin">Login</button>
    </div>
    <!-- onmouseover="this.style.border='1px solid #00A289\'" onmouseout="this.style.border=\'1px solid transparent\'" -->
    <div class="protocol">
      登录即同意Share Creators的
      <a
        href="https://product.sharecreators.cn/static/html/policy.html"
        target="_blank"
      >
        隐私政策
      </a>
      和
      <a
        href="https://product.sharecreators.cn/static/html/terms.html"
        target="_blank"
      >
        服务条款
      </a>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import { keyLogin } from "@/api/login";
import { Message } from "element-ui";
export default {
  name: "LoginPlugin",
  data() {
    return {
      loginKey: ""
    };
  },
  computed: {},
  methods: {
    closeLogin() {
      console.log("准备关闭了");
      this.$EventBus.$emit("changeCompant", "Popup");
    },
    async initConfig() {
      console.log("执行登录初始化");
      let that = this;
      if (chrome && chrome.storage && chrome.storage.local) {
        console.log("使用chrome.storage 获取登录信息");
        chrome.storage.local.get(["loginInfo"]).then(result => {
          if (result.loginInfo) {
            // 重定向到登录页面
            that.$EventBus.$emit("changeCompant", "Popup");
          }
        });
      }
    },
    async toLogin() {
      if (chrome && chrome.storage && chrome.storage.sync) {
        console.log("使用chrome.storage 存储登录信息");
        chrome.storage.sync.set({ bid: "bid", token: "token" }, function () {
          console.log("保存成功！");
        });
      }
      let keyObj;
      try {
        keyObj = JSON.parse(atob(this.loginKey));
      } catch {
        this.$message.error({
          message:"无效的密钥",
          customClass: 'el-message-index'
        });
        return;
      }
      console.log(keyObj);
      const params = {
        loginKey: this.loginKey,
        keyType: "CHROME_PLUGIN"
      };
      let baseUrl;
      try {
        baseUrl = atob(keyObj.baseUrl);
      } catch {
        this.$message.error({
          message:"无效的密钥",
          customClass: 'el-message-index'
        });
        return;
      }
      await chrome.storage.local.set({ baseUrl });
      console.log("存储", { baseUrl });
      const { _success, data, _msg } = await keyLogin(params);
      console.log("登录结果", { _success, data, _msg });
      if (!_success) {
        console.log("为什么无效呢");
        Message.error({
          message: _msg || "操作失败",
          customClass: 'el-message-index'
        });
        return;
      }
      if (chrome && chrome.storage && chrome.storage.local) {
        let that = this;
        //console.log("使用chrome.storage 存储登录信息")
        let saveObj = {
          bid: data.bid,
          token: data.token,
          loginInfo: JSON.stringify(data),
          loginKey: this.loginKey
        };
        chrome.storage.local.set(saveObj).then(() => {
          this.$emit("loginSuccess");
        });
      }
      if (!this.loginKey) return;
    }
  },
  created() {
    this.initConfig();
  }
};
</script>

<style scoped lang="scss">
.login-content {
  overflow: hidden;
  z-index: 98 !important;
  position: relative !important;
  background-color: #323642 !important;
  border-radius: 4px;
  h2 {
    font-size: 18px;
    color: #ffffff;
    text-align: left;
    img {
      width: 110px;
    }
  }

  .close-icon {
    position: absolute;
    right: 12px;
    top: 12px;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    color: #d1d1d1;

    &:active {
      opacity: 0.6;
    }
  }

  .login-title {
    color: #d1d1d1;
    text-align: center;
    font-size: 18px;
    margin: 40px 0;
    font-weight: bold;
  }
  .key-label {
    text-align: left;
    font-size: 14px;
    color: #d1d1d1;
    margin-bottom: 12px;
  }

  .input-key {
    width: 100%;
    position: relative;

    .input-style {
      width: 100%;
      color: #d1d1d1;
      vertical-align: middle;
      border-radius: 5px;
      background: #2b2e39;
      border: 1px solid transparent;
      height: 40px;
      padding: 0 10px;
      outline: none;

      &:focus {
        border: 1px solid #00a289;
      }
    }
    .sc-login-info-success {
      position: absolute;
      top: 44px;
      left: 0;
      height: 20px;
      color: #00a289;
    }

    .sc-login-info {
      position: absolute;
      top: 44px;
      left: 0;
      height: 20px;
      color: #ff6969;
    }

    &:hover {
      .input-style {
        border: 1px solid #00a289;
      }
    }
  }
  .login-button {
    text-align: center;
    width: 100%;
    margin-top: 60px;
    cursor: pointer;

    #btn-sc-login {
      color: white;
      outline: none !important;
      border: none;
      width: 100%;
      height: 40px;
      background: #00a289;
      text-align: center;
      cursor: pointer;
    }
  }

  .protocol {
    color: #888c99;
    margin-top: 50px;

    a {
      text-decoration: none;
      color: #00a289;
    }
  }
}
</style>